<template>
	<view>

		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>

		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left"></view>
				<view class="kaoshi-head-m">{{cityName}}刷题</view>
			</view>
		</view>


		<view class="evertop">


			<navigator url="/pagesa/citys/citys"
				style="display: flex;align-items: center;justify-content: center;margin-left: 20rpx;">
				<image src="http://shuati26.kptedu.com/uploads/image/address.png" style="width: 25px;height: 25px;">
				</image>
				<text style="margin: 10rpx;" v-if="cityName">{{cityName}}</text>
				<text v-else>切换省份</text>
				<image src="../../static/img/add-icon.png" style="width: 30rpx;height: 30rpx;"></image>
			</navigator>


			<view class="top-nav">
				距2023年{{cityName}}专升本考试
				<text>{{diff_days}}</text>天
			</view>
		</view>

		<view class="big-image">
			<image src="http://shuati26.kptedu.com/uploads/image/shuati.png"
				style="border-radius: 20rpx;width: 100%;margin: auto;height: 110px;margin-top: 20rpx;"
				@tap="$openrul('/pagesa/questionBank/questionBankList/index?from_type=1&subject_id='+subject_id+'&token='+token)">
			</image>
		</view>


		<view class="kaoshi-head-nav">
			<!-- <view class="kaoshi-head-nav-flex" >
				<image src="../../static/img/xuexijilu.png" class="kaoshi-head-nav-img"></image>
				<view>刷知识点</view>
			</view> -->
			<view class="kaoshi-head-nav-flex"
				@tap="$openrul('/pagesa/my/studyrecord/studyrecord?from_type=2&subject_id='+subject_id)">
				<image src="../../static/img/xuexijilu.png" class="kaoshi-head-nav-img"></image>
				<view class="btnText">学习记录</view>
			</view>
			<view class="kaoshi-head-nav-flex"
				@tap="navTo('/pagesa/my/collect/index?type=1&currentId='+currentId+'&subject_id='+subject_id)">
				<image src="../../static/img/wodeshoucang.png" class="kaoshi-head-nav-img"></image>
				<view class="btnText">我的收藏</view>
			</view>
			<view class="kaoshi-head-nav-flex"
				@tap="navTo('/pagesa/my/wrongQuestion/index?type=1&currentId='+currentId+'&subject_id='+subject_id)">
				<image src="../../static/img/mycuoti.png" class="kaoshi-head-nav-img"></image>
				<view class="btnText">我的错题</view>
			</view>
		</view>




		<view style="height: 40px;width: 100%;"></view>
		<view class="shuti-con-list">
			<text>刷题记录</text>

			<u-empty v-if="list==''" mode="list" icon="https://shuati26.kptedu.com/uploads/image/wushuati.png"
				text="您的刷题记录为空,快去刷题吧" textColor="#000" width="460rpx" height="420rpx">
				<view v-if="list==''" class="empty_btn"
					@tap="$openrul('/pagesa/questionBank/questionBankList/index?from_type=1&subject_id='+subject_id)">
					开始刷题
				</view>


			</u-empty>

			<uni-collapse>
				<uni-collapse-item v-for="(item,index) in list" :key="index" titleBorder="none">
					<template v-slot:title>
						<title>
							<view class="kaoshi-tiku-content">
								<view class="kaoshi-tiku-content-top">
									<image
										style="width: 19px;height: 19px;margin-right: 7px;margin-top: 2px;border-radius: 5px;"
										src="../../static/img/jia.png"></image>
									{{item.name}}
								</view>
								<view class="kaoshi-tiku-content-bottom" style="margin-left: 30rpx;">
									<view style="width: 120rpx;">
										<u-line-progress :show-percent="false" :round="false" height="8rpx"
											:showText="false" :percentage="item.jindu" activeColor="gray">
										</u-line-progress>

									</view>
									<view>
										{{item.test_num}}/{{item.total_num}}题
									</view>
									<view>
										正确率：{{item.scale}}%
									</view>
								</view>
							</view>
						</title>


					</template>


					<view class="content">
						<view v-for="(citem,cindex) in item.children" :key="cindex" @click="goto_detail(citem,'1')"
							class="kaoshi-tiku-content">
							<view class="kaoshi-tiku-content-top">
								{{citem.name}}
							</view>
							<view class="kaoshi-tiku-content-bottom" style="margin-left: -10rpx;width: 600rpx;">
								<view style="width: 120rpx;">
									<u-line-progress :show-percent="false" :round="false" height="8rpx"
										:showText="false" :percentage="citem.jindu" activeColor="green">
									</u-line-progress>
								</view>
								<view style="margin-left: -30rpx;">
									{{citem.test_num}}/{{citem.total_num}}题
								</view>
								<view>
									正确率：{{citem.scale}}%
								</view>

								<view v-if="citem.jindu>0" style="display: flex;flex-flow: row nowrap;color: orange;"
									@click.stop="gojl(citem)">
									<u-icon name="file-text-fill" color="orange"></u-icon>
									记录
								</view>
								<view v-else style="display: flex;flex-flow: row nowrap;color: darkgray;"
									@click.stop="nojl()">
									<u-icon name="file-text-fill" color="darkgray"></u-icon>
									记录
								</view>
								<image src="../../static/img/in.png"></image>
							</view>
						</view>

					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>


		<u-overlay :show="overlayshow" @click="overlayshow = false">
			<view class="warp">
				<view class="rect"
					@tap.stop="$openrul('/pagesa/auth/qrcode/qrcode?service_image='+service_image+'&service_wxcode='+service_wxcode)">
					<image src="http://shuati26.kptedu.com/uploads/image/indextc.png" style="width: 100%;
									height: 100%;"></image>
				</view>
				<u-icon color="#ffffff" size="30" top="30rpx" name="close-circle" @click.stop="overlayshow = false">
				</u-icon>
			</view>
		</u-overlay>

		<image src="http://shuati26.kptedu.com/uploads/image/jihuoimg.png" class="fiexd_img"
			@click="overlayshow = true"></image>
	</view>
</template>
<script>
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue";
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	import {
		mapState
	} from 'vuex';
	import Error from '@/core/untils/error/index';

	export default {
		components: {

			uniNoticeBar,
			tuiTabs

		},
		data() {
			return {
				cityName: '',
				notice: '距2023河南专升本考试253天',
				notice_address: '',
				unit_zylist: [],

				unit_list: [],

				zhenti_list: [],
				currentId: 0,
				tabs: [{
					name: "章节刷题记录"
				}, {
					name: "历年真题记录"
				}],
				currentTab: 0,

				progressWidth: '50',

				list: [],

				overlayshow: false,
				token: '',
				service_image: '',
				service_wxcode: '',
				diff_days: '',
			};
		},
		onShow() {

			this.cityName = uni.getStorageSync('choose_cityName')
			this.diff_days = uni.getStorageSync('diff_days')
			this.get_studyUnit();

			//console.log(this.cityName+"this.cityName")
		},
		onLoad() {

			this.cityName = uni.getStorageSync('choose_cityName')

			this.token = this.userinfo.token
			this.indexData()
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true
			});
			// #endif
			this.diff_days = uni.getStorageSync('diff_days')

		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		computed: {
			...mapState(['subject', 'userinfo']),
			static_media() {
				return {
					img01: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/tiku-icon1.png',
					img02: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/tiku-icon2.png',
					img03: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/tiku-icon3.png',
					img04: this.$myConfig.localMedia + 'http://shuati26.kptedu.com/uploads/image/tiku-icon4.png',
				};
			},
		},

		methods: {
			async indexData() {

				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.indexData,
					data: {
						province: uni.getStorageSync('choose_cityName'),
					},
					needLogin: true
				});

				if (res.code === 1) {
					this.service_wxcode = res.data.data.service_wxcode
					this.service_image = res.data.data.service_image
				}
			},
			async get_studyUnit() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitList,
					data: {
						province: this.cityName,
					},
					needLogin: true,
				})

				if (res.code == 1) {
					this.list = res.data.data
				}
			},

			async goUrl(url) {
				uni.navigateTo({
					url: '/pagesa/my/vip/webview?url=' + url
				})
			},

			goto_detail(citem, type) {
				if (citem.total_num == 0) { //如果目录下没有题目，提示用户
					this.$myUtils.$prompt.showToast({
						icon: 'none',
						title: '当前目录下没有题目，请联系老师'
					});
					return
				}

				if (type == '1') {
					if (citem.is_last == 0) {
						//非终极栏目，点击进入下级栏目
						this.$openrul('/pagesa/questionBank/detail/index?id=' + citem.id + '&from_type=1' + '&name=' +
							citem.name + '&total_num=' + citem.total_num + '&is_last=' + citem.is_last)
					} else if (citem.is_last == 1) {
						if (this.$myUserLogin.getToken()) {
							//终极栏目，点击进入答题页
							this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + citem.id + '&from_type=1' +
								'&name=' + citem.name + '&total_num=' + citem.total_num + '&is_last=' + citem.is_last)
						} else {
							Error.errorNotLoggedIn();
						}
					}
				} else if (type == '2') {
					if (this.$myUserLogin.getToken()) {
						//历年真题都是终极栏目，点击进入答题页
						this.$openrul('/pagesa/questionBank/questionBankAnswer/index?id=' + citem.id + '&from_type=2' +
							'&name=' + citem.name + '&total_num=' + citem.total_num + '&is_last=' + citem.is_last)
					} else {
						Error.errorNotLoggedIn();
					}
				}
			},
			//跳转前需要登录
			navTo(url) {
				if (this.$myUserLogin.getToken()) {
					this.$openrul(url)
				} else {
					Error.errorNotLoggedIn();
				}
			},
			gojl(item) {

				var scale = this.list.scale
				this.$openrul('/pagesa/questionBank/questionOver/index?id=' + item.id + '&name=' + item.name + '&scale=' +
					item.scale + '&total_num=' + item.total_num + '&is_last=' + item.is_last)
			},
			nojl() {
				uni.showToast({
					title: '您还没有记录，快去刷题吧',
					icon: 'none'
				})
			}

		}
	};
</script>
<style>
	page {
		background: #ffffff;

	}

	.select_title {
		display: flex;
		font-size: 34rpx;
		line-height: 100rpx;

	}

	.evertop {
		padding: 26rpx 10rpx;
	}

	.select_title_absolute {
		position: absolute;
		z-index: 999;
		width: 100%;
		background: #fff
	}

	.select_title_absolute>view {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #f5f5f5;
		font-size: 28rpx;
		color: #333;
		width: 93%;
		margin: 0 auto;
	}

	.select_title_right {
		margin-left: 20rpx;
		font-weight: 600
	}

	.select_title_right image {
		position: relative;
		top: 6rpx;
		left: 10rpx
	}

	.kaoshi-head-nav {
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-size: 23rpx;
		font-weight: 900;
		color: #000;
		z-index: 10000;
		padding: 0 20rpx;

	}

	.kaoshi-head-nav .kaoshi-head-nav-flex {
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		height: 100rpx;
		justify-content: center;
		width: 220rpx;


	}

	.btnText {
		font-size: 14px
	}

	.kaoshi-head-nav-img {
		width: 20px;
		height: 20px;
		margin-right: 10rpx;
	}

	.kaoshi-tiku-title {
		width: 92%;
		margin: 0 auto;
		padding: 12px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.kaoshi-tiku-title-l {
		display: flex;
		font-weight: bold;
		font-size: 17px;
	}

	.kaoshi-tiku-title-r {
		color: #000;
		border: solid 1px #d8d8d8;
		padding: 5px 13px;
		border-radius: 35px;
		font-size: 12px;
	}

	.kaoshi-tiku {
		background: #fff;
		width: 93%;
		margin: 0 auto 8px;
		border-radius: 6px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
	}

	.kaoshi-tiku-content {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-flow: column nowrap;

		font-size: 14px;
		padding: 10px 0;
		border-bottom: solid 1px #f5f5f5;
		height: 100rpx;
	}

	.kaoshi-tiku-content .icon-arrow {
		padding-left: 13px;
		color: #b3b3b3;
	}

	.kaoshi-tiku-content-flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: inherit;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:first-child {
		padding-bottom: 6px;
	}

	.kaoshi-tiku-content .kaoshi-tiku-content-flex:last-child {
		font-size: 14px;
	}

	.kaoshi-tiku-content-top {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 16px;
	}

	.kaoshi-tiku-content-top img {
		width: 20px;
		height: 22px;
		margin-right: 10px;
	}

	.kaoshi-tiku-content-bottom {
		font-size: 11px;
		display: flex;
		align-items: center;
		color: #9c9c9c;
		width: 450rpx;
		justify-content: space-around;

	}

	.kaoshi-tiku-content-flex .icon-dui2 {
		margin: 2px 2px 0 0;
		color: #3c7bfc;
	}

	.kaoshi-tiku-bilv {
		font-size: 22px;
		color: #000;
		display: flex;
		align-items: baseline;
	}

	.kaoshi-remind-title {
		font-size: 13px;
		color: #000;
	}

	.shuti-con-list {
		width: 90%;
		margin: auto;

	}

	.shuti-con-list>text:nth-child(1) {
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 20rpx;

	}

	.kaoshi-tiku-content-bottom>image {
		width: 20px;
		height: 20px;
		position: relative;
		top: -30rpx;
		left: 80rpx;

	}

	.empty_btn {
		background-color: #f1f5fe;
		color: #65c4e2;
		border-radius: 20rpx;
		font-size: 20rpx;
		padding: 7rpx 20rpx;
		margin-top: 30rpx;
	}
</style>
